<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:900px;">
        <div class="detail">
            <div class="title">{{ article.title }}</div>
            <div class="sub-title">{{ article.createdAt }}</div>

            <div class="content" v-html="article.content"></div>

            <div class="readBox">
                <div class="read_box">
                    <p>已读人员：</p>
                    <p v-for="(item, index) in readData" :key="index">{{ item.teacherName }} <span
                            v-if="index < readData.length - 1">，</span>
                    </p>
                </div>
                <div class="read_box">
                    <p>未读人员：</p>
                    <p v-for="(item, index) in unreadList" :key="index">{{ item.teacherName }} <span
                            v-if="index < unreadList.length - 1">，</span>
                    </p>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="closeDialog()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox } from "element-plus";

export default {
    name: "AddBaseStudent",
    components: { ElForm, ElMessage, ElMessageBox },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            article: {},
            readData: [],
            unreadList: [],
        };
    },
    watch: {
        article() {
            this.$nextTick(() => {
                // 获取所有的图片元素  
                const content = document.querySelector('.content')
                const images = document.querySelector('.content').getElementsByTagName('img');
                if (content && images) {
                    const computedStyle = window.getComputedStyle(content);
                    const width = parseFloat(computedStyle.getPropertyValue('width'));
                    for (let i = 0; i < images.length; i++) {
                        // console.log(images[i].width, width);
                        if (images[i].width > width) {
                            images[i].style.maxWidth = '100%';
                            images[i].style.height = 'auto';
                        }
                    }
                }
            });
        },

    },
    methods: {
        closeDialog() {
            this.dialogFormVisible = false
            this.clear();
        },
        clear() {
            this.article = {}
            this.readData = []
            this.unreadList = []
        },
        queryNotice(id) {
            httpService(
                "/javaApi/messages/queryById",
                { id: id },
                "get"
            ).then((data) => {
                this.article = data;
            });
        },
        readhandle(id) {
            let params = new FormData()
            params.append('messageId', id)
            httpService(
                "/javaApi/messageViews/add", params, "post"
            ).then((data) => {
                // console.log(9999, data);
            });
        },
        readList(id) {
            httpService("/javaApi/messageViews/listAll", { "messageId": id }, "get").then((data) => {
                if (data) {
                    data.forEach(item => {
                        if (item.viewedAt != null) {
                            this.readData.push(item)
                        } else {
                            this.unreadList.push(item)
                        }
                    });
                }
            });
        },
    },
};
</script>
<style>
.el-select {
    width: 100%;
}

.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
}

.detail .title {
    font-size: 20px;
}

.detail td {
    border: 1px solid #dedede;
}

.detail table {
    text-align: center;
    margin: 0 auto;
}

.detail .sub-title {
    font-size: 16px;
    padding: 10px;
    color: #888888;
}

.detail {
    /* min-height: calc(100vh - 370px); */
    text-align: center;
    /* margin: 0 10%; */
}

.content {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

/* .content img {
    width: 100%;
    height: auto;
} */

.readBox {
    width: 80%;
    /* margin-top: 50px; */
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.read_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
</style>